<script>
import treetable from '@/mixins/treetable/index.js'
import AjaxStore from '@/utils/store/proxyAjax'
import DialogForm from '@/components/DialogForm'
import ManagerFenpei from './managerFenpei/managerFenpei'
import DatagroupFenpei from './datagroupFenpei/datagroupFenpei'
import siteBelong from './siteBelong/siteBelong'
import clipboard from '@/mixins/clipboard.js'
import store from './store.js'
import request from '@/utils/request.js'
import { mapGetters } from 'vuex'
export default {
  name: 'siteProject',
  mixins: [treetable, clipboard, store],
  //  mixins: [commonMixin, store, clipboard ]
  components: {
    DialogForm,
    ManagerFenpei,
    DatagroupFenpei,
    siteBelong
  },
  computed: {
    ...mapGetters(['enabledDatagroup'])
  },
  data() {
    return {
      groupId: '',
      showInputFlag: true,
      inputPlaceholder: '输入编码、名称或管理员搜索',
      tableSelectionCol: false,
      tableOptWidth: '200',
      delIdKey: 'projectId',
      idKey: 'catId',
      dialogType: '',
      tableTitle: '站点管理',
      dialogImportTitle: '站点所属部门设置',
      managerFenpeiTitle: '',
      datagroupFenpeiTitle: '',
      projectId: '',
      catId: '',
      tree: {
        width: '280',
        accordion: false,
        isShowHeader: true,
        treeMenuButtonList: [],
        treeOperateButtonList: [],
        showCheckbox: false,
        selectTree: {},
        nextNodeKey: 'node',
        idKey: 'catId',
        search: {},
        title: '站点分类选择',
        getNextChildNode: this.getNextNode
      },
      getNextNodeUrl: '/v1/sys/projectcategory/findNextChildNodeTree',
      addNodeInfoUrl: '/v1/yq/project/add',
      updateNodeInfoUrl: '/v1/yq/project/update',
      delNodeInfoUrl: '/v1/yq/project/delete',
      changeStatusUrl: '/v1/yq/project/changeStatus',
      url: '/v1/yq/project/findById',
      getQueryInfoUrl: '/v1/yq/parameter/platform_sites',
      importDeptmentUrl: '/v1/yq/projectDept/saveProjectDept',
      store: new AjaxStore({
        url: '/v1/yq/project/query'
      }),
      QueryArr: [],
      columns: [
        {
          prop: 'projectName',
          label: '名称',
          sortable: true,
          minWidth: '150',
          'show-overflow-tooltip': true,
          'header-align': 'center'
        },
        {
          prop: 'projectType',
          label: '站点类型',
          sortable: true,
          width: '150',
          'show-overflow-tooltip': true,
          'header-align': 'center'
        },
        {
          prop: 'appType',
          label: '应用类型',
          sortable: true,
          width: '120',
          formatter: (row, column, cellValue) =>
            cellValue === 0 ? 'web应用' : 'App',
          'show-overflow-tooltip': true,
          'header-align': 'center'
        },
        {
          prop: 'appName',
          label: '关联应用',
          sortable: true,
          width: '120',
          'show-overflow-tooltip': true,
          'header-align': 'center'
        },
        // {
        //   prop: 'projectNo',
        //   label: '编码',
        //   sortable: true,
        //   width: '150',
        //   'show-overflow-tooltip': true,
        //   'header-align': 'center'
        // },

        // {
        //   prop: "url",
        //   label: "链接地址",
        //   sortable: true,
        //   "min-width": "120",
        //   "header-align": "center",
        //   "show-overflow-tooltip": true,
        //   scopedSlots: {
        //     default: scope => {
        //       return scope.row.url ? (
        //         <span
        //           class="cursor"
        //           {...{
        //             directives: [{ name: "clipboard", value: scope.row.url }]
        //           }}
        //           on-success={e => this.handleCopySuccess(e)}
        //           on-error={e => this.handleCopyError(e)}
        //         >
        //           {scope.row.url}
        //         </span>
        //       ) : (
        //         ""
        //       );
        //     }
        //   }
        // },
        {
          prop: 'managerNames',
          label: '管理员',
          sortable: true,
          width: '120',
          'show-overflow-tooltip': true,
          'header-algin': 'center'
        },
        {
          prop: 'dataStatus',
          label: '状态',
          width: '120',
          formatter: (row, column, cellValue) =>
            cellValue === 1 ? '启用' : '未启用',
          'header-align': 'center',
          align: 'center'
        }
        // {
        //   prop: 'remark',
        //   label: '描述',
        //   sortable: true,
        //   'min-width': '100',
        //   'show-overflow-tooltip': true,
        //   'header-algin': 'center'
        // }
      ],
      searchFields: [],
      searchModel: {},
      searchBtnList: [],
      toolPanelBtnList: this.toolPanelBtns,
      tableRowBtnList: this.tableRowBtns,
      formPanel: {
        add: {
          model: {
            projectNo: '',
            projectName: '',
            url: '',
            catId: '',
            orderNo: '',
            dataStatus: 1,
            managerNames: '',
            version: '',
            remark: '',
            fullPath: '',
            createdTime: '',
            creator: '',
            projectId: '',
            projectTypeId: '',
            appType: '',
            clientId: '',
            seq: '',
            environmentFlag: 0,
            mqOff: false
          },
          fields: [
            {
              label: '名称',
              prop: 'projectName',
              placeholder: '请输入站点名称',
              anchor: 24
            },
            {
              label: '站点类型',
              prop: 'projectTypeId',
              placeholder: '请选择站点类型',
              xType: 'SelectConfig',
              isLocal: false,
              // relatedFields: ["addClientId"],
              getData: () => {
                return request({
                  url: '/v1/yq/project/types',
                  method: 'get'
                }).then(({ data }) => {
                  return data.map(item => {
                    return {
                      value: item.id,
                      label: item.name,
                      ...item
                    }
                  })
                })
              }
            },
            {
              label: '应用类型',
              prop: 'appType',
              placeholder: '请选择应用类型',
              xType: 'SelectCode.APPLICATION_TYPE',
              relatedFields: ['addClientId'],
              class: 'app-type',
              ref: 'addAppType'
            },
            {
              label: '关联应用',
              prop: 'clientId',
              placeholder: '请选择关联应用',
              xType: 'SelectConfig',
              isLocal: false,
              ref: 'addClientId',
              class: 'client-id',
              getData: () => {
                if (this.formPanel.add.model.appType === '') {
                  return Promise.resolve([])
                } else {
                  return request({
                    url: '/v1/yq/sysApp/querySysApps',
                    method: 'get',
                    params: {
                      appType: this.formPanel.add.model.appType
                    }
                  }).then(({ data }) => {
                    return data.map(item => {
                      return {
                        value: item.clientId,
                        label: item.appName,
                        ...item
                      }
                    })
                  })
                }
              },
              on: {
                'el.form.update': (val, ctx, origin, form) => {
                  form.model.clientId = ''
                  ctx.load()
                },
                'visible-change': (val) => {
                  val && this.$refs.addForm.$refs.addClientId.load()
                }
              }
            },
            {
              label: '站点排序号',
              prop: 'seq',
              placeholder: '请输入站点排序号',
              anchor: 24
            },
            // {
            //   label: '网络区',
            //   prop: 'environmentFlag',
            //   xType: 'SelectCode.NETWORK_AREA',
            //   placeholder: '请选择网络区',
            //   anchor: 24
            // },
            {
              label: '是否开启MQ',
              prop: 'mqOff',
              xType: 'switch',
              anchor: 24,
              'active-value': true,
              'inactive-value': false
            },
            // {
            //   label: "分类",
            //   prop: "catId",
            //   anchor: 24,
            //   xType: "SelectTree.TREE",
            //   ref: "addPid",
            //   relatedFields: ["addFunPath"],
            //   placeholder: "请选择站点分类",
            //   treeParams: {
            //     get: {
            //       url: "/v1/sys/projectcategory/findNextChildNodeTree",
            //       nextNodeKey: "node",
            //       idKey: "id"
            //     }
            //   },
            //   valueToLabelParams: {
            //     url: "/v1/sys/projectcategory/findNameById",
            //     idKey: "catId"
            //   },
            //   on: {
            //     "visible-change": val =>
            //       val && this.$refs.addForm.$refs.addPid.reload()
            //   }
            // },
            // {
            //   label: "链接地址",
            //   prop: "url",
            //   placeholder: "请输入链接地址",
            //   anchor: 24
            // },
            // { label: '状态', prop: 'dataStatus', xType: 'switch', anchor: 24, "active-value": 1, "inactive-value": 0 },
            {
              label: '描述',
              prop: 'remark',
              placeholder: '请输入站点描述',
              type: 'textarea',
              rows: 4,
              anchor: 24
            }
          ],
          rules: {
            projectTypeId: [
              { required: true, message: '请选择站点类型', trigger: 'blur' }
            ],
            appType: [
              { required: true, message: '请选择应用类型', trigger: 'blur' }
            ],
            clientId: [
              { required: true, message: '请选择关联应用', trigger: 'blur' }
            ],
            projectName: [
              { required: true, message: '请输入站点名称', trigger: 'blur' }
            ],
            catId: [
              { required: true, message: '请选择站点分类', trigger: 'blur' }
            ],
            seq: [
              {
                pattern: /^[1-9]\d*$/,
                message: '仅可输入正整数',
                trigger: 'blur'
              }
            ]
          },
          title: '新增站点',
          type: 'ADD',
          ref: 'addForm',
          submitBtnList: this.addBtns
        },
        edit: {
          model: {
            projectNo: '',
            projectName: '',
            managerNames: '',
            url: '',
            catId: '',
            orderNo: '',
            dataStatus: 0,
            version: '',
            remark: '',
            fullPath: '',
            createdTime: '',
            creator: '',
            projectId: '',
            projectType: '',
            projectTypeId: '',
            appType: '',
            clientId: '',
            seq: '',
            environmentFlag: 0,
            mqOff: false
          },
          fields: [
            {
              label: '名称',
              prop: 'projectName',
              placeholder: '请输入站点名称',
              anchor: 24
            },
            {
              label: '站点类型',
              prop: 'projectTypeId',
              placeholder: '请选择站点类型',
              xType: 'SelectConfig',
              disabled: false,
              isLocal: false,
              // relatedFields: ["editClientId"],
              ref: 'projectTypeId',
              getData: () => {
                return request({
                  url: '/v1/yq/project/types',
                  method: 'get'
                }).then(({ data }) => {
                  return data.map(item => {
                    return {
                      value: item.id,
                      label: item.name,
                      ...item
                    }
                  })
                })
              }
            },
            {
              label: '应用类型',
              prop: 'appType',
              placeholder: '请选择应用类型',
              xType: 'SelectCode.APPLICATION_TYPE',
              relatedFields: ['editClientId'],
              class: 'app-type',
              ref: 'editAppType'
            },
            {
              label: '关联应用',
              prop: 'clientId',
              placeholder: '请选择关联应用',
              xType: 'SelectConfig',
              isLocal: false,
              ref: 'editClientId',
              class: 'client-id',
              getData: () => {
                if (this.formPanel.edit.model.appType === '') {
                  return Promise.resolve([])
                } else {
                  return request({
                    url: '/v1/yq/sysApp/querySysApps',
                    method: 'get',
                    params: {
                      projectId: this.formPanel.edit.model.projectId,
                      appType: this.formPanel.edit.model.appType
                    }
                  }).then(({ data }) => {
                    return data.map(item => {
                      return {
                        value: item.clientId,
                        label: item.appName,
                        ...item
                      }
                    })
                  })
                }
              },
              on: {
                'el.form.update': (val, ctx, origin, form) => {
                  form.model.clientId = ''
                  ctx.load()
                },
                'visible-change': val => {
                  val && this.$refs.editForm.$refs.editClientId.load()
                }
              }
            },
            {
              label: '编码',
              prop: 'projectNo',
              placeholder: '请输入站点编码',
              disabled: true,
              anchor: 24
            },
            {
              label: '站点排序号',
              prop: 'seq',
              placeholder: '请输入站点排序号',
              anchor: 24
            },
            // {
            //   label: '网络区',
            //   prop: 'environmentFlag',
            //   xType: 'SelectCode.NETWORK_AREA',
            //   placeholder: '请选择网络区',
            //   anchor: 24
            // },
            {
              label: '是否开启MQ',
              prop: 'mqOff',
              xType: 'switch',
              anchor: 24,
              'active-value': true,
              'inactive-value': false
            },
            {
              label: '是否启用',
              prop: 'dataStatus',
              xType: 'switch',
              anchor: 24,
              'active-value': 1,
              'inactive-value': 0
            },
            // {
            //   label: "分类",
            //   prop: "catId",
            //   anchor: 24,
            //   xType: "SelectTree.TREE",
            //   ref: "editPid",
            //   relatedFields: ["editFunPath"],
            //   placeholder: "请选择站点分类",
            //   // 下拉树参数
            //   treeParams: {
            //     get: {
            //       url: "/v1/sys/projectcategory/findNextChildNodeTree",
            //       nextNodeKey: "node",
            //       idKey: "id"
            //     }
            //   },
            //   valueToLabelParams: {
            //     url: "/v1/sys/projectcategory/findNameById",
            //     idKey: "catId"
            //   }
            // },
            // {
            //   label: "链接地址",
            //   prop: "url",
            //   placeholder: "请输入链接地址",
            //   anchor: 24
            // },
            // { label: '链接地址', prop: 'url', placeholder: '请输入链接地址', anchor: 24 },
            // { label: '状态', prop: 'dataStatus', xType: 'switch', anchor: 24, "active-value": 1, "inactive-value": 0 },
            {
              label: '描述',
              prop: 'remark',
              placeholder: '请输入站点描述',
              type: 'textarea',
              rows: 4,
              anchor: 24
            }
          ],
          rules: {
            projectTypeId: [
              { required: true, message: '请选择站点类型', trigger: 'blur' }
            ],
            appType: [
              { required: true, message: '请选择应用类型', trigger: 'blur' }
            ],
            clientId: [
              { required: true, message: '请选择关联应用', trigger: 'blur' }
            ],
            projectName: [
              { required: true, message: '请输入站点名称', trigger: 'blur' }
            ],
            catId: [
              { required: true, message: '请选择站点分类', trigger: 'blur' }
            ],
            seq: [
              {
                pattern: /^[1-9]\d*$/,
                message: '仅可输入正整数',
                trigger: 'blur'
              }
            ]
          },
          title: '编辑站点',
          type: 'EDIT',
          ref: 'editForm',
          submitBtnList: this.editBtns
        }
      }
    }
  },
  activated() {
    this.getQueryInfo().then(({ data }) => {
      this.QueryArr = data
    })
  },
  methods: {
    handleAddSubmit() {
      return this.$refs.addForm
        .validate()
        .then(() => {
          return this.add(this.formPanel.add.model)
        })
        .then(({ success, message }) => {
          this.$message({
            type: success ? 'success' : 'error',
            message: message
          })
          if (success) {
            this.$refs.table.load(1)
            this.dialogType = ''
            // 新增后操作 刷新
            // this.$refs.tree.refresh()
          } else {
            throw new Error(message)
          }
        })
        .catch(err => {
          return Promise.reject(err)
        })
    },
    handleEditSubmit() {
      return this.$refs.editForm
        .validate()
        .then(() => {
          return this.update(this.formPanel.edit.model)
        })
        .then(({ success, message }) => {
          this.$message({
            type: success ? 'success' : 'error',
            message: message
          })
          if (success) {
            this.$refs.table.load()
            this.dialogType = ''
            // 编辑后 刷新本地 tree
            // this.$refs.tree.refresh()
          } else {
            throw new Error(message)
          }
        })
        .catch(error => {
          return Promise.reject(error)
        })
    },
    handleDelete(row) {
      return this.$confirm(
        '此操作不能回退，确认要删除您选中的数据么?',
        '提示',
        {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }
      )
        .then(() => {
          const params = {}
          params[this.delIdKey] = row[this.delIdKey]
          return this.del(params)
        })
        .then(({ success, message }) => {
          this.$message({
            type: success ? 'success' : 'error',
            message: message
          })
          if (success) {
            this.$refs.table.load(1)
            // 删除后 刷新本地 tree
            // this.$refs.tree.refresh()
          }
          setTimeout(() => {
            document.activeElement.blur()
          }, 300)
        })
        .catch(error => {
          setTimeout(() => {
            document.activeElement.blur()
          }, 300)
          if (error === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          }
          console.log(error === 'cancel' ? '已取消删除' : error)
          // return Promise.reject(error)
        })
    },
    handleChangeStatus(row) {
      this.changeStatus({ projectId: row.projectId })
        .then(({ success }) => {
          this.$message({
            type: success ? 'success' : 'error',
            message: success ? '状态修改成功！' : '状态修改失败！'
          })
          if (success) {
            this.$refs.table.load(1)
          }
        })
        .catch(err => console.log(err))
    },
    // 复制成功回调
    handleCopySuccess(_e) {
      this.$message({
        type: 'success',
        message: '复制成功'
      })
    },
    // 复制失败回调
    handleCopyError(_e) {
      this.$message({
        type: 'error',
        message: '复制失败'
      })
    },
    handleInputClick(ev, val) {
      const params = {}
      params.q_cond = val
      params.q_catId = this.catId
      this.store._searchParams = params
      this.$refs.table.load(1, this.store.limit)
    },
    // 获取当前站点分类
    renderTreeCheckCallback(node) {
      this.catId = node.data.id
    },
    // 站点管理员分配
    handleManagerFenpeiSubmit() {
      new Promise((resolve, reject) => {
        let params = {}
        params.projectId = this.projectId
        this.selectedList = this.$refs.ManagerFenpei.handleReturnSelectedList()
        const arr = []
        this.selectedList.forEach(element => {
          arr.push({
            userId: element.userId,
            userName: element.userName
          })
        })
        params.users = arr
        params = JSON.stringify(params)
        this.request({
          url: '/v1/yq/project/updateManagerInfo',
          method: 'post',
          headers: {
            'Content-Type': 'application/json'
          },
          data: params
        })
          .then(({ success, message }) => {
            if (success) {
              this.$message({
                type: 'success',
                message
              })
              this.dialogType = ''
              resolve()
              this.$refs.table.load(1)
            } else {
              this.$message({
                type: 'error',
                message
              })
              reject(new Error(message))
            }
          })
          .catch(error => {
            console.log(error)
            reject(error)
          })
      })
    },
    handleManagerFenpeiCancel() {
      this.$refs.ManagerFenpei.handleEmptySelectedList()
      this.dialogType = ''
    },
    handleDatagroupFenpeiSubmit() {
      new Promise((resolve, reject) => {
        const params = {}
        params.projectId = this.projectId
        params.dataGroupIds = this.$refs.DatagroupFenpei.handleReturnSelectedList()
          .map(item => {
            return item.datagroupId
          })
          .join('#')
        this.request({
          url: '/v1/yq/project/updateDataGroupInfo',
          method: 'post',
          params
        })
          .then(({ success, message }) => {
            if (success) {
              this.$message({
                type: 'success',
                message
              })
              this.dialogType = ''
              resolve()
              this.$refs.table.load(1)
            } else {
              this.$message({
                type: 'error',
                message
              })
              reject(new Error(message))
            }
          })
          .catch(error => {
            console.log(error)
            reject(error)
          })
      })
    },
    handleDatagroupFenpeiCancel() {
      this.$refs.DatagroupFenpei.handleEmptySelectedList()
      this.dialogType = ''
    },
    // 人员分配
    handleManagerFenpei(row) {
      this.managerFenpeiTitle = row.projectName + '-管理员配置'
      this.projectId = row.projectId
      this.dialogType = 'MANAGERFENPEI'
    },
    // 站点所属部门设置
    handleSiteBlong(row) {
      this.dialogType = 'IMPORT'
      this.projectId = row.projectId
      this.$nextTick(() => {
        this.$refs.siteBelong.projectId = this.projectId
        this.$refs.siteBelong.getTreeData()
        this.$refs.siteBelong.initPage()
      })
    },
    // 站点所属部门设置取消
    handleImportCancel() {
      this.$nextTick(() => {
        this.$refs.siteBelong.refresh()
      })
      this.dialogType = ''
    },
    // 站点所属部门设置保存
    handleImportSubmit() {
      const data = JSON.stringify({
        deptIds: this.$refs.siteBelong.getAllCheckedList(),
        projectId: this.projectId,
        deptLeafIds: this.$refs.siteBelong.getHalfCheckedList()
      })
      this.dialogType = ''
      request({
        url: this.importDeptmentUrl,
        method: 'post',
        headers: {
          'Content-Type': 'application/json'
        },
        data
      }).then(({ success, message }) => {
        if (success) {
          this.$message({
            type: 'success',
            message
          })
        } else {
          this.$message({
            type: 'error',
            message
          })
        }
      })
      console.log('handleImportSubmit -> data', data)
      console.log('handleImportSubmit -> data', data)
    },
    // 站点菜单配置
    handleMenuManage(row) {
      this.$router.push({
        path: `/siteconfig/sitemanage/src/menuconfig/menuconfig/${row.projectId}/${row.projectName}`
      })
    },
    // 数据组分配
    handleDataGroup(row) {
      this.datagroupFenpeiTitle = row.projectName + '-数据组配置'
      this.projectId = row.projectId
      this.dialogType = 'DATAGROUPFENPEI'
    },
    handleCurrentChange() {},
    handleAdd() {
      this.dialogType = this.formPanel.add.type
      this.$nextTick(() => {
        // 清空表单内容避免遗留上次新增内容
        this.$refs.addForm && this.$refs.addForm.resetFields()
        this.formPanel.add.model.catId = this.catId
      })
    },
    handleEdit(row) {
      return new Promise((resolve, reject) => {
        const params = {}
        params['projectId'] = row['projectId']
        this.check(params)
          .then(({ success, message, data }) => {
            if (success) {
              Object.assign(
                this.formPanel.edit.model,
                this.editModelInitialData
              )
              for (const key in this.formPanel.edit.model) {
                this.$set(
                  this.formPanel.edit.model,
                  key,
                  key === 'environmentFlag' ? parseInt(data[key]) : data[key]
                )
              }
              this.dialogType = this.formPanel.edit.type
              this.$nextTick(() => {
                this.$refs.editForm && this.$refs.editForm.$refs.editClientId && this.$refs.editForm.$refs.editClientId.load()
              })
              resolve(data)
            } else {
              this.$message({
                type: 'error',
                message
              })
              reject(new Error(message))
            }
          })
          .catch(err => {
            console.log(err)
            reject(err)
          })
      })
    },
    handleLook(row) {
      this.$router.push({
        path: `/siteconfig/sitemanage/src/siteDataLook/siteDataLook/${row.projectId}`
      })
    },
    // eslint-disable-next-line
    renderTableHeader(h) {
      return (
        <c-row slot='tableTitle' class='tableTitle'>
          {this.tableTitle}
        </c-row>
      )
    },
    // eslint-disable-next-line
    renderCustom(h) {
      return [
        <DialogForm
          visible={this.dialogType === 'MANAGERFENPEI'}
          width='1200px'
          title={this.managerFenpeiTitle}
          on-close={this.handleManagerFenpeiCancel}>
          <ManagerFenpei
            ref='ManagerFenpei'
            projectId={this.projectId}></ManagerFenpei>
          <c-form ref='form' slot='footer'>
            <c-form-item class='submit-btn'>
              <ButtonList operateBtnList={this.managerFenpeiBtns}></ButtonList>
            </c-form-item>
          </c-form>
        </DialogForm>,
        <DialogForm
          visible={this.dialogType === 'DATAGROUPFENPEI'}
          width='750px'
          title={this.datagroupFenpeiTitle}
          on-close={this.handleDatagroupFenpeiCancel}>
          <DatagroupFenpei ref='DatagroupFenpei' projectId={this.projectId} />
          <c-form ref='form' slot='footer'>
            <c-form-item class='submit-btn'>
              <ButtonList operateBtnList={this.DatagroupFenpeiBtns} />
            </c-form-item>
          </c-form>
        </DialogForm>,
        <DialogForm
          closeOnClickModal={false}
          visible={
            // true
            this.dialogType === 'IMPORT'
          }
          class='deptment-dialog'
          width='660px'
          title={this.dialogImportTitle}
          on-close={this.handleImportCancel}>
          <siteBelong ref='siteBelong' />
          <c-form ref='form' slot='footer'>
            <c-form-item class='submit-btn'>
              <ButtonList operateBtnList={this.importBtns}></ButtonList>
            </c-form-item>
          </c-form>
        </DialogForm>
      ]
    },
    renderOperateBtns(row) {
      return (
        <TableButtonList
          operateBtnList={
            this.QueryArr.filter(item => {
              return item.codeValue === row.projectId
            }).length > 0
              ? this.enabledDatagroup === '0'
                ? this.tableRowBtnsWithoutEditAndDelAndDatagroup
                : this.tableRowBtnsWithoutEditAndDel
              : this.enabledDatagroup === '0'
                ? this.tableRowBtnsWidthoutDatagroup
                : this.tableRowBtns
          }
          props-model={row}
        />
      )
    }
  },
  beforeCreate() {
    const urlArr = ((this.$route.meta && this.$route.meta.children) || []).map(
      item => item.url
    )

    this.addBtns = [
      {
        label: '保存',
        methods: 'handleAddSubmit',
        url: '/v1/yq/project/add',
        icon: 'el-icon-circle-check-outline',
        type: 'primary',
        diabled: false
      },
      {
        label: '取消',
        methods: 'handleCancel',
        url: '',
        icon: 'el-icon-circle-close-outline',
        diabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.editBtns = [
      {
        label: '保存',
        methods: 'handleEditSubmit',
        url: '/v1/yq/project/update',
        icon: 'el-icon-circle-check-outline',
        type: 'primary',
        diabled: false
      },
      {
        label: '取消',
        methods: 'handleCancel',
        url: '',
        icon: 'el-icon-circle-close-outline',
        diabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.toolPanelBtns = [
      {
        label: '新增',
        methods: 'handleAdd',
        url: '',
        icon: 'el-icon-circle-plus-outline',
        type: 'primary',
        disabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.tableRowBtns = [
      {
        label: '编辑',
        methods: 'handleEdit',
        url: '/v1/yq/project/update',
        icon: 'el-icon-edit-outline',
        type: 'primary',
        key: 'edit',
        align: 'top-start',
        disabled: false
      },
      {
        label: '站点管理员配置',
        methods: 'handleManagerFenpei',
        svgIcon: 'rolepersonfenpei',
        type: 'primary',
        key: 'addUser',
        align: 'top-start',
        disabled: false
      },
      {
        label: '站点菜单配置',
        methods: 'handleMenuManage',
        url: '/v1/yq/project/update',
        icon: 'el-icon-tickets',
        type: 'primary',
        key: 'manageMenu',
        align: 'top-start',
        disabled: false
      },
      {
        label: '站点数据组分配',
        methods: 'handleDataGroup',
        url: '',
        icon: 'el-icon-menu',
        type: 'primary',
        key: 'dataGroup',
        align: 'top-start',
        disabled: false
      },
      {
        label: '删除',
        methods: 'handleDelete',
        url: '/v1/yq/project/delete',
        icon: 'el-icon-delete',
        type: 'danger',
        key: 'delete',
        align: 'top-start',
        disabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.tableRowBtnsWidthoutDatagroup = [
      {
        label: '编辑',
        methods: 'handleEdit',
        url: '/v1/yq/project/update',
        icon: 'el-icon-edit-outline',
        type: 'primary',
        key: 'edit',
        align: 'top-start',
        disabled: false
      },
      {
        label: '站点管理员配置',
        methods: 'handleManagerFenpei',
        svgIcon: 'rolepersonfenpei',
        type: 'primary',
        key: 'addUser',
        align: 'top-start',
        disabled: false
      },
      {
        label: '站点菜单配置',
        methods: 'handleMenuManage',
        url: '/v1/yq/project/update',
        icon: 'el-icon-tickets',
        type: 'primary',
        key: 'manageMenu',
        align: 'top-start',
        disabled: false
      },
      {
        label: '删除',
        methods: 'handleDelete',
        url: '/v1/yq/project/delete',
        icon: 'el-icon-delete',
        type: 'danger',
        key: 'delete',
        align: 'top-start',
        disabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.tableRowBtnsWithoutEditAndDel = [
      {
        label: '站点管理员配置',
        methods: 'handleManagerFenpei',
        svgIcon: 'rolepersonfenpei',
        type: 'primary',
        key: 'addUser',
        align: 'top-start',
        disabled: false
      },
      {
        label: '站点菜单配置',
        methods: 'handleMenuManage',
        url: '/v1/yq/project/update',
        icon: 'el-icon-tickets',
        type: 'primary',
        key: 'manageMenu',
        align: 'top-start',
        disabled: false
      },
      {
        label: '站点数据组分配',
        methods: 'handleDataGroup',
        url: '',
        icon: 'el-icon-menu',
        type: 'primary',
        key: 'dataGroup',
        align: 'top-start',
        disabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.tableRowBtnsWithoutEditAndDelAndDatagroup = [
      {
        label: '站点管理员配置',
        methods: 'handleManagerFenpei',
        svgIcon: 'rolepersonfenpei',
        type: 'primary',
        key: 'addUser',
        align: 'top-start',
        disabled: false
      },
      {
        label: '站点菜单配置',
        methods: 'handleMenuManage',
        url: '/v1/yq/project/update',
        icon: 'el-icon-tickets',
        type: 'primary',
        key: 'manageMenu',
        align: 'top-start',
        disabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.managerFenpeiBtns = [
      {
        label: '保存',
        methods: 'handleManagerFenpeiSubmit',
        url: '/v1/yq/project/updateDataGroupInfo',
        icon: 'el-icon-circle-check-outline',
        type: 'primary',
        disabled: false
      },
      {
        label: '取消',
        methods: 'handleManagerFenpeiCancel',
        url: '',
        icon: 'el-icon-circle-close-outline',
        disabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.DatagroupFenpeiBtns = [
      {
        label: '保存',
        methods: 'handleDatagroupFenpeiSubmit',
        url: '/v1/yq/project/updateDataGroupInfo',
        icon: 'el-icon-circle-check-outline',
        type: 'primary',
        disabled: false
      },
      {
        label: '取消',
        methods: 'handleDatagroupFenpeiCancel',
        url: '',
        icon: 'el-icon-circle-close-outline',
        disabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.importBtns = [
      {
        label: '保存',
        methods: 'handleImportSubmit',
        url: '',
        icon: 'el-icon-circle-check-outline',
        type: 'primary',
        disabled: false
      },
      {
        label: '取消',
        methods: 'handleImportCancel',
        url: '',
        icon: 'el-icon-circle-close-outline',
        disabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)
  }
}
</script>

<style lang="scss">
.siteProject {
  box-sizing: border-box;
  .searchPanel {
    display: none;
  }
  .left {
    height: 100%;
  }
  .right {
    .tableTitle {
      font-size: 16px;
      font-weight: 400;
      color: #1f2f3d;
      height: 50px;
      align-items: center;
      display: flex;
      border-bottom: 1px solid #e6e6e6;
    }
    .cursor {
      cursor: pointer;
    }
  }
}
.sitedefault-item-display-none {
  display: none;
}
</style>
